<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <div id="userinfo"></div>
    <button id="btn">点击</button>
    <button onclick="hello()">hello</button>
    <button onclick="login()">login</button>
    <table border="1"></table>
    <form action=""></form>
  </body>
  <script>
    window.onload = function () {
      //   btn.onclick = function () {
      //     var xhr = new XMLHttpRequest()
      //     xhr.onreadystatechange = function () {
      //       if (xhr.readyState == 4 && xhr.status == 200) {
      //         var res = JSON.parse(xhr.responseText),
      //           str = ''
      //         for (var i in res.data) {
      //           str += `<tr>
      //                     <td>${res.data[i].title}</td>
      //               </tr>`
      //         }
      //         document.getElementsByTagName('table')[0].innerHTML = str
      //       }
      //     }
      //     xhr.open('GET', 'https://liu.zzgoodqc.cn/hello', true)
      //     xhr.send()
      //   }
      //   btn.onclick = function () {
      //     var xhr = new XMLHttpRequest()
      //     xhr.onreadystatechange = function () {
      //       if (xhr.readyState == 4 && xhr.status == 200) {
      //         var res = JSON.parse(xhr.responseText),
      //           str = ''
      //         for (var i in res.data) {
      //           str += `<tr>
      //                     <td>${res.data[i].title}</td>
      //               </tr>`
      //         }
      //         document.getElementsByTagName('table')[0].innerHTML = str
      //       }
      //     }
      //     xhr.open('POST', 'https://liu.zzgoodqc.cn/login', true)
      //     xhr.setRequestHeader(
      //       'Content-type',
      //       'application/x-www-form-urlencoded'
      //     )
      //     var str = 'username=123&password=321'
      //     xhr.send(str)
      //   }
    }
    //全局变量 用来存储http请求对象的 方便在js脚本全局使用
    var xmlhttp
    /**
     * 封装http请求 get和post
     * 参数1： 要请求的url地址
     * 参数2： 回调函数 用来处理不同地方调用时的不同逻辑
     * 参数3： 请求方法 是用get还是post 可选，不传参数时 默认get
     * 参数4： 当时POST方法请求时传递的数据 不传默认null
     * */
    function fun(url, cfunc, method = 'GET', data = null) {
      //实例化http请求对象 赋值给声明好的全局变量
      xmlhttp = new XMLHttpRequest()
      //监听http请求状态的改变 并把参数的回调函数 赋值给响应函数
      xmlhttp.onreadystatechange = cfunc
      //配置一些请求参数信息 如请求方法，请求地址，是否异步
      xmlhttp.open(method, url, true)
      //如果是post请求 则需要设置请求头 和 添加发送的数据
      if (method == 'POST') {
        //设置请求头为表单默认的类型
        xmlhttp.setRequestHeader(
          'Content-type',
          'application/x-www-form-urlencoded'
        )
        //发送请求 并把数据发送给服务器
        xmlhttp.send(data)
      } else {
        //GET请求时 不用传任何参数
        xmlhttp.send()
      }
    }
    function hello() {
      fun(
        'https://liu.zzgoodqc.cn/users',
        function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
              var res = JSON.parse(xmlhttp.responseText),
                str = ''
              for (var i = res.data.length - 1; i >= 0; i--) {
                str += `<tr>
                          <td>${res.data[i].id}</td>
                          <td>${res.data[i].name}</td>
                          <td>${res.data[i].password}</td>
                          <td>${res.data[i].email}</td>
                          <td>${res.data[i].created_at}</td>
                          <td>${res.data[i].updated_at}</td>
                          <td><button onclick="getUserInfo(${res.data[i].id})">查看用户详情</button></td>
                    </tr>`
              }
              document.getElementsByTagName('table')[0].innerHTML = str
            }
          }
        },
        'GET'
      )
    }
    function getUserInfo(id) {
      fun('https://liu.zzgoodqc.cn/user/' + id, function () {
        if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
          var res = JSON.parse(xmlhttp.responseText)
          document.getElementById('userinfo').innerHTML =
            'ID:' + res.data.id + '用户名字：' + res.data.name
        }
      })
    }
    function login() {
      var data = 'username=123&password=321'
      fun(
        'https://liu.zzgoodqc.cn/login',
        function () {
          if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
            console.log(xmlhttp.responseText)
          }
        },
        'POST',
        data
      )
    }
  </script>
</html>
